<template>
  <div class="city">
    <city-header></city-header>
    <city-hot :hotCities="hotCities" :cities="cities"></city-hot>
  </div>
</template>

<script>
import CityHeader from './pages/Header'
import CityHot from './pages/HotCity'
export default{
  data () {
    return {
      hotCities: [],
      cities: {}
    }
  },
  components: {
    CityHeader,
    CityHot
  },
  mounted () {
    this.$http.get('static/mock/data/city.json').then(res => {
      // console.log(res.data.data)
      let data = res.data.data
      this.hotCities = data.hotCities
      this.cities = data.cities
    })
  }
}
</script>

<style lang='stylus'>
  .city
    background: #f5f5f5
    color: #212121
    font-size: .28rem
    h2
      font-size: 0.24rem
      font-weight: normal
      padding: .24rem .3rem
</style>
